<!--结算单订单首页-->
<template>
  <div class="contain">
    <!--search-->
    <div class="m-sech-wrap mr20">
      <router-link to='/search?type=statement' class="m-sech-box displayflex">
        <i class="iconfont icon-search"></i>
        <div class="flex1 m-sech-ipt">
          <!-- <input type="text" placeholder="输入结算单号/单位"
                               v-model="SettleBillNo"> -->
          <div class="txt">{{sechTxt || '输入结算单位'}}</div>
        </div>
      </router-link>
      <!-- <div class="m-sech-btn"  @click="getData()">搜索</div> -->
    </div>
    <!--tab-->
    <div class="lltab mb10 ft14">
      <tab bar-active-color="#77babd" 
           defaultColor="#333333"
           active-color="#77babd"
           :line-width='2'>
        <tab-item selected 
          @on-item-click="picked=''">全部</tab-item>
        <tab-item 
          @on-item-click="picked=1">未录发票</tab-item>
        <tab-item 
          @on-item-click="picked=2">已录发票</tab-item>
      </tab>
    </div>
    <div class="acpt-list">
      <div class="acpt-list-wrap mb30" v-for="item in todolist">
        <div class="acpt-list-head cf">
          <span class="time f-l">{{item.SettleDate | timeshort}}</span>
          <em class="org f-r ft12">{{(picked==1)?'未录发票':'已录发票'}}</em>
        </div>
        <div class="displayflex acpt-list-body">
          <i class="iconfont icon-cargo"></i>
          <div class="txt flex1" @click="toDetail(item)">
            <p class="ft17">{{item.SettleCorpName}}</p>
            <p>{{item.BeginDate | timeshort}} ~ {{item.EndDate | timeshort}}</p>
            <p>￥{{item.Amount}}</p>
          </div>
          <div class="acpt-list-btn">
            <div class="btn mb10" v-if="picked==1" @click="toEnter(item)">录发票</div>
          </div>
        </div>
      </div>
    </div>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
export default {
  name:'statementList',
  components: {
    manageFooter
  },
  data() {
    return {
      //tab选中，1未开发票，2已开发票
      picked: "",
      SettleBillNo: '',
      todolist: [],
      InvoiceState: '',
      sechTxt:''
    }
  },
  created(){
    this.sechTxt = sessionStorage.sechtxt;
  },
  watch: {
    picked: function(newV) {
      if (newV == '2') {
        this.InvoiceState = 'I02';
        this.getData();
      } else if (newV == '1')  {
        this.InvoiceState = 'I01';
        this.getData();
      } else{
        this.InvoiceState = '';
        this.getData();
      }
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.getData();
    })
  },
  methods: {
    getData: function() {
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
          TenantGuid: userinfo.TenantGUID,
          SettleBillNo: this.SettleBillNo,
          SettleCorpName: this.sechTxt,
          InvoiceState: this.InvoiceState,
      };
      this.Ajax.post('getSettle', query).then(function(resp) {
        self.todolist = resp.Datas;
      });
    },
    toDetail: function(item) {
      sessionStorage.items = JSON.stringify(item);
      this.$router.push({
          path: '/order/statementDetail'
      });
    },
    toEnter: function(item) {
      sessionStorage.items = JSON.stringify(item);
      this.$router.push({
          path: '/order/statementChoice'
      });
    },

  }
}
</script>